<template>
  <div class="bgc-default pad-20">
    <div class="tab-sticky">
      <el-tabs v-model="activeName">
        <el-tab-pane label="内容" name="0"></el-tab-pane>
        <el-tab-pane label="分类" name="1"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="bg-color-white pad-20 mar-t-20">
      <template v-if="activeName === '0'">
        <help-content></help-content>
      </template>
      <template v-if="activeName === '1'">
        <help-category></help-category>
      </template>
    </div>
  </div>
</template>
<script>
import HelpCategory from './components/help-category/index'
import HelpContent from './components/help-content/index'
export default {
  components: { HelpCategory, HelpContent },
  data() {
    return {
      activeName: '0'
    }
  }
}
</script>
<style lang="less" scoped>
.bgc-default{
  min-height: calc(100vh - 50px);
}
.tab-sticky{
  position: sticky;
  top: 0px;
  left: 20px;
  width: calc(100% + 40px);
  background: white;
  z-index: 1000;
  padding-top: 10px;
  padding-left: 17px;
  margin-left: -20px;
  margin-top: -20px;
  /deep/ .el-tabs__header{
    margin: 0;
  }
}
</style>
